<template>
    <div>
         <el-form :inline="true" style="width: 100%;float:left" class="demo-form-inline">
        <el-form-item>
       <el-input v-model="input" placeholder="请输入内容" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>


  

  <el-table
    :data="allRoleData"
    style="width: 100% ">

<el-table-column
      label="角色编号"
      width="180">
      <template slot-scope="scope">
     
        <span style="margin-left: 10px">{{scope.row.rid}}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="角色名称"
      width="180">
      <template slot-scope="scope">
     
        <span style="margin-left: 10px">{{scope.row.rname}}</span>
      </template>
    </el-table-column>





 <el-table-column label="分配权限">
      <template slot-scope="scope">
        <el-button
          size="mini"
           type="Brand"
          @click="handleEdit(scope.$index, scope.row)" >查看分配</el-button>
       
      </template>
    </el-table-column>
  </el-table>




 <el-dialog v-bind:title="titleRname" :visible.sync="dialogFormVisible"
  style="width:100%" >
    <div>
  <el-table
    ref="multipleTable"
    :data="tableData2"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">


    <el-table-column
      type="selection"
      width="55"
    
      >
    </el-table-column>
    <el-table-column
      label="父级"
      width="120">
      <template slot-scope="scope">{{scope.row.parentName==null?scope.row.pname:null}}</template>
    </el-table-column>
    <el-table-column
      prop="pname"
      label="菜单名称"
      width="120">
       <template slot-scope="scope">{{scope.row.parentName==null?null:scope.row.pname}}</template>
    </el-table-column>

     <el-table-column
      prop="url"
      label="Url"
      width="120">
    </el-table-column>

    <el-table-column
      prop="ifHas"
      label="设置情况"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
         <div style="margin-top: 20px">
    <el-button @click="toggleSelection()">取消选择</el-button>
     <el-button @click="saveSelection()">保存设置</el-button>
  </div>
  </div>
    </el-dialog>



  </div>
</template>
<script>
  export default {
       data() {
        return {
           rrid:'',
            titleRname:'',
            input: '',
            number:[],
              tableData2: [{
                pid:'',
              parentName: '',
               pname: '',
               url: '',
              ifHas:''
                }, ],
                 tableData: [{
                       pid:'',
              parentName: '',
               pname: '',
               url: 'Company',
              ifHas:''
                }, ],

            nowRpids:[],
            
            roleNewPids:[],
            
        allRoleData:[{
             rid:'',
             rname:'',
        }],
        
       dialogFormVisible:false,

      }
    },
    created() {
             this.showAllRoles()
    
    },
    
  
  updated() {
     this.toggleSelection(this.tableData);
  },
    methods: {
      showAllRoles(){
            this.$axios.post("http://localhost:8888/hs/ever-role/findAllRoles")
          .then((res) => {     
            this.allRoleData=res.data.roles           
      })   
     },
      handleEdit(index, row) { 
          this.titleRname=row.rname
          this.dialogFormVisible = true
            this.findNowRolePermissions(row.rid)
            this.showAllPermission()
              this.rrid=row.rid
        },


          showAllPermission(){

              this.$axios.post("http://localhost:8888/hs/ever-permission/findAllPermissions")
          .then((res) => {     
              this.tableData2=res.data.permissions
        })  
        },
        // 找到当前role的权限
        findNowRolePermissions(rid){
                this.$axios.post("http://localhost:8888/hs/ever-rolepermission/findRolePermissions?rid="+rid)
              .then((res) => {  
                      this.tableData=res.data.oneRolePermissions
                })  
          },
        //得到选择的数据
        
       handleSelectionChange(val) {
        this.multipleSelection = val;
        
      },


        //保存选中的权限
        saveSelection(){

              if(this.multipleSelection!==undefined){       
          for(let i=0;i<this.multipleSelection.length;i++){
                 this.roleNewPids.push(this.multipleSelection[i].pid)
          }
          }     
                
                this.$axios.post("http://localhost:8888/hs/ever-rolepermission/saveRoleNewPermissions?rid="+this.rrid,this.roleNewPids)
              .then((res) => {  
                

                  this.dialogFormVisible=false
                
             })   

              this.roleNewPids=[]

            console.log(this.multipleSelection)
        } ,







      //调用这个方法能默认或者手动选中
       toggleSelection (rows) {
      if (rows) {
        this.$nextTick(() => {
          rows.forEach(row => {
            this.tableData2.forEach((item, index) => {
              if (row.pid === item.pid) {
                this.tableData2[index].ifHas='已设置'
                this.$refs.multipleTable.toggleRowSelection(this.tableData2[index])

              }
            })
          })
        })
      } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
    }
    
    }
  
</script>